<template>
    <div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="skyblue" :dot="dot" />
            <van-action-bar-icon icon="cart-o" text="购物车" color="#ff5000" :badge="badge" @click="goCar" />
            <van-action-bar-icon :icon="icon" :text="text" color="#ff5000" @click="collection" />
            <van-action-bar-button type="warning" text="加入购物车" @click="showTop" />
            <van-popup v-model:show="show" position="bottom" closeable>
                <p>选择加入购物车的数量</p>
                <div>
                    <van-stepper v-model="value" input-width="40px" button-size="24px" theme="round" />
                </div>
                <van-button type="warning" block @click="addBesure">确认加入</van-button>
            </van-popup>
            <van-action-bar-button type="danger" text="立即购买"  @click="goCar"/>
        </van-action-bar>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import router from '@/router';
import { addCar } from '@/service/api';
import { showSuccessToast, showFailToast } from 'vant';

const { proid } = defineProps(['proid']);
const dot = ref(false);
const badge = ref<number | undefined>();
const icon = ref('star-o');
const text = ref('收藏店铺');
const show = ref(false);
const value = ref(1);
const showTop = () => {
    show.value = true;
};
async function addBesure() {
    const result = await addCar(proid, value.value as unknown as string);
    if (result.data.code === '200') {
        showSuccessToast('成功加入购物车');
        show.value = false;
        return
    }
    showFailToast('操作失败');
}

function collection() {
    icon.value = (icon.value == 'star') ? 'star-o' : 'star';
    text.value = (text.value == '收藏店铺') ? '已收藏' : "收藏店铺"
}
function goCar() {
    router.push('/car')
}
</script>
<style lang='less' scoped>
.van-popup {
    display: flex;
    justify-content: space-between;
    position: relative;

    p {
        text-align: center;
        margin: 10px 0;
    }

    div {
        text-align: right;

        .van-stepper {
            font-size: 24px;
            padding: 20px 0;
        }
    }
}
</style>